import { Tooltip } from "antd";
import "@/styles/components/themes/mode-select.scss";
import PropTypes from "prop-types";
const ModeSelect = ({ items = [], value = "light", align = "center", onChange }) => {
  return (
    <div className="theme-mode-select-container" data-align={align}>
      {items.map((item) => (
        <Tooltip key={item.value} title={item.label} placement="bottom">
          <div
            className="theme-mode-item"
            data-mode={item.value}
            data-selected={item.value === value}
            onClick={() => item.value !== value && onChange(item.value)}
          >
            <div className="mode-card" style={{ backgroundColor: item.colors[0] }} />
            <div className="mode-card" style={{ backgroundColor: item.colors[1] }} />
            <div className="mode-card" style={{ backgroundColor: item.colors[2] }} />
          </div>
        </Tooltip>
      ))}
    </div>
  );
};
ModeSelect.propTypes = {
  items: PropTypes.array,
  value: PropTypes.string,
  align: PropTypes.string,
  onChange: PropTypes.func,
};

export default ModeSelect;
